<template>
	<view class="item-content">
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<scroll-view :class="scrollClass" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd" scroll-y 
		 @scrolltolower="loadmore(index)" :style="scrollStyle">

			<template v-if="itemList.length>0">
				<slot></slot>
				<!-- 上拉加载 -->
				<load-more :loadtext="loadtext"></load-more>
			</template>
			<template v-else>
				<!-- 无内容默认 -->
				<no-thing text="还没有作品哦～"></no-thing>
			</template>
		</scroll-view>



	</view>

</template>

<script>
	import loadMore from '@/components/common/load-more.vue';
	import refresh from '@/components/common/refresh.vue';
	import noThing from "@/components/common/no-thing.vue";
	export default {
		components: {
			loadMore,
			refresh,
			noThing
		},
		props: {
			itemList: Array,
			scrollStyle: Object,
			selfLoadtext: {
				type: String,
				default: 'loading'
			},
			scrollClass: ''
		},
		data() {
			return {
				loadtext: ''
			};
		},
		mounted() {
			
		},
		methods: {
			loadmore(index) {
				console.log(this.loadtext ,'====', this.selfLoadtext)
				if (this.loadtext == this.selfLoadtext) {
					return;
				}
				// 修改状态
				this.loadtext = this.selfLoadtext;
				this.$emit('refresh','loadmore')
			},
			// 刷新touch监听
			refreshStart(e) {

				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {

				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			
			},
			isRefresh() {
				let that = this;
				setTimeout(() => {
					uni.showToast({
						icon: 'none',
						title: '刷新成功'
					})

					this.$emit('refresh','refresh')
					this.$refs.refresh.endAfter() //刷新结束
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.item-content {
		background: rgba(247, 247, 247, 1);
		position: relative;
		overflow: hidden;
	}
</style>
